import { Tabs } from 'antd-mobile'
import HomeList from './HomeList'
import { useFetchChannels } from './useFetchChannels'

import './style.css'

const Home = () => {
  // 封装自定义hook让逻辑和渲染分离
  const { channels } = useFetchChannels()

  return (
    <Tabs defaultActiveKey="0">
      {/* defaultActiveKey="0" 默认激活 */}
      {channels.map((item) => (
        <Tabs.Tab title={item.name} key={item.id}>
          <div className="listContainer">
             {/* HomeList列表 */}

            <HomeList channelId={item.id}></HomeList>
          </div>
        </Tabs.Tab>
      ))}
    </Tabs>
  )
}

export default Home